* {
  box-sizing: border-box;
}

:root {

  --bg-builtin: radial-gradient(farthest-corner at 0 0, #666 0%, #333 100%);
  --bg-builtin-hover: radial-gradient(farthest-corner at 0 0, #999 0%, #333 100%);
  --bg-builtin-dark: radial-gradient(farthest-corner at 0 0, #333 0%, #222 100%);

  --bg-function: radial-gradient(farthest-corner at 0 0, navy 0%, dodgerblue 120%);
  --bg-pure: radial-gradient(farthest-corner at 0 0, teal 0%, mediumturquoise 100%);
  --bg-getter : radial-gradient(farthest-corner at 0 0, green 0%, mediumseagreen 100%);
  --bg-setter: radial-gradient(farthest-corner at 0 0, maroon 0%, crimson 100%);
  --bg-process: radial-gradient(farthest-corner at 0 0, purple 0%, mediumorchid 100%);
  --bg-title: linear-gradient(90deg, navy, #1084d0);

  font-size: 14px;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* 98.css */
  
  /* Color */
  --text-color: #222222;
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #dfdfdf;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);
  --default-button-border-raised-outer: inset -2px -2px var(--window-frame), inset 1px 1px var(--window-frame);
  --default-button-border-raised-inner: inset 2px 2px var(--button-highlight), inset -3px -3px var(--button-shadow), inset 3px 3px var(--button-face);
  --default-button-border-sunken-outer: inset 2px 2px var(--window-frame), inset -1px -1px var(--window-frame);
  --default-button-border-sunken-inner: inset -2px -2px var(--button-highlight), inset 3px 3px var(--button-shadow), inset -3px -3px var(--button-face);


  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);

  /* Tabs */
  --border-tab: inset -1px 0 var(--window-frame),
    inset 1px 1px var(--button-face),
    inset -2px 0 var(--button-shadow),
    inset 2px 2px var(--button-highlight)
}

body {
  margin: 0;
  font-family: Consolas, system-ui;
}

.el-tabs__header {
  margin-bottom: 0!important;
}

.el-tabs--left .el-tabs__header.is-left {
  margin-right: 0!important;
}

.el-tab-pane {
  height: 100%;
}

.my-action {
  cursor: pointer;
  user-select: none;
}

.dot {
  height: 1rem;
  width: 1rem;
  border-radius: 0.5rem;
  border: 1px solid white;
  overflow: hidden;
}


.handle {
  cursor: grab;
}



.my-table {
  width: 100%;
  border-spacing: 0;
  td, th {
    border-top: 1px solid white;
    border-left: 1px solid white;
    line-height: 2rem;
  }
  th {
    background: var(--bg-body);
    border-bottom: 2px solid grey;
    border-right: 2px solid grey;
  }
  td {
    background: var(--bg-content);
    border-bottom: 2px solid #b7b7b7;
    border-right: 2px solid #b7b7b7;
  }
}
